<template>
    <baidu-map class="bm-view" :center="mapCenter" :zoom="mapZoom" :scroll-wheel-zoom="true" ak="baidu-ak"
        @ready="handlerBMap" @mousemove="syncPolyline" @click="paintPolyline" @rightclick="newPolyline">
        <bm-control>
            <button @click="addFence()">新增电子围栏</button>
        </bm-control>
        <bm-info-window :position="savePosition" title="新增电子围栏" :show="infoWindowShow" @close="infoWindowClose">
            <el-form :model="formInline" :rules="rules" ref="ruleForm" class="demo-form-inline">
                <el-form-item label="围栏名称" prop="name">
                    <el-input v-model="formInline.name" placeholder="请输入电子围栏名称"></el-input>
                </el-form-item>
                <!-- <el-form-item label="围栏类型">
            <el-select v-model="formInline.region" placeholder="活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item> -->
                <el-form-item>
                    <el-button v-if="saveFenceShow" @click="saveFence" class="drawBtn">保存</el-button>
                    <el-button v-else @click="toggle('polyline', 'ruleForm')" class="drawBtn">开始绘制</el-button>
                </el-form-item>
            </el-form>

        </bm-info-window>

        <bm-polyline :path="path" v-for="path of polyline.paths"></bm-polyline>

    </baidu-map>
</template>

<script>
import _ from 'lodash'

export default {
    props: {
        carBasicMonitoring: {
            type: Array
        }
    },
    data() {
        return {
            formInline: {
                name: ''
            },
            rules: {
                name: [{ required: true, message: '请输入电子围栏名称', trigger: 'blur' },]
            },
            infoWindowShow: false,
            saveFenceShow: false,
            polyline: {
                editing: false,
                paths: []
            },
            savePosition: { lng: 116.404, lat: 39.915 },
            showWindow: true,
            showPoint: true,
            mapZoom: 12,
            animation: '',
            point: {
                lng: 116.403963,
                lat: 39.915119,
                label: 'KujoMiva',
            },

            mapCenter: {
                lng: 116.403963,
                lat: 39.915119,
            },
            circlePath: {
                center: {
                    lng: 0,
                    lat: 0
                },
                radius: 100
            },
        }
    },
    methods: {
        // 电子围栏
        // 保存电子围栏
        saveFence() {
            this.infoWindowShow = false
            this.saveFenceShow = false
            this.polyline.editing = true
            console.log(this.polyline.paths, 'pathspathspathspaths')
        },
        // 关闭新增弹框
        infoWindowClose(e) {
            this.infoWindowShow = false
        },
        // 点击新增电子围栏
        addFence() {
            console.log('进来了')
            this.infoWindowShow = true
            this.saveFenceShow = false
            this.formInline.name = ''
        },
        // 绘制电子围栏
        toggle(name, formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.infoWindowShow = false
                    this[name].editing = !this[name].editing
                    console.log(this.polyline.paths, 'pathspaths')
                } else {
                    return false;
                }
            });

        },
        // 鼠标移动事假
        syncPolyline(e) {
            if (!this.polyline.editing) {
                return
            }
            const { paths } = this.polyline
            if (!paths.length) {
                return
            }
            const path = paths[paths.length - 1]
            if (!path.length) {
                return
            }
            if (path.length === 1) {
                path.push(e.point)
            }
            this.$set(path, path.length - 1, e.point)
        },
        // 鼠标右键
        newPolyline(e) {
            var that = this
            console.log(e, 'eeeeeeeeeeeeee')
            console.log(this.savePosition)
            this.savePosition.lng = e.point.lng
            this.savePosition.lat = e.point.lat
            if (!this.polyline.editing) {
                return
            }
            const { paths } = this.polyline
            if (!paths.length) {
                paths.push([])
            }
            const path = paths[paths.length - 1]
            path.pop()
            if (path.length) {
                paths.push([])
            }
            that.infoWindowShow = true
            that.saveFenceShow = true
            console.log(that.infoWindowShow, 'this.infoWindowShow')
        },
        //鼠标左键
        paintPolyline(e) {
            if (!this.polyline.editing) {
                return
            }
            const { paths } = this.polyline
            !paths.length && paths.push([])
            paths[paths.length - 1].push(e.point)
        },
        handlerBMap({ BMap, map }) {
            // console.log(BMap, map)
            this.BMap = BMap
            this.map = map
        },

    },
}
</script>

<style scoped>
.bm-view {
    width: 100%;
    height: calc(100vh - 165px) !important;
}

.drawBtn {
    float: right;
}
</style>